<template>
	<view class="borderStyle">
		<text class="fontStyle">用车申请记录:</text>
	</view>
	<view class="divider"></view>
	<view>
		<!-- 表头 -->
		<view class="table-header" style="font-size: 25rpx;">
			<view class="header-item" v-for="(header, index) in tableHeaders" :key="index">
				{{ header }}
			</view>
		</view>

		<!-- 表格数据 -->
		<view v-for="(item, rowIndex) in autoTableData" :key="rowIndex" class="row"
			:class="{ 'even-row': rowIndex % 2 === 0, 'odd-row': rowIndex % 2 !== 0 }">
			<view class="cell">{{ item.userID }}</view>
			<view class="cell">{{ item.userName }}</view>
			<view class="cell">{{ item.autoType }}</view>
			<view class="cell">{{ item.submitTime }}</view>
			<view class="cell" @click="showAutoDetails(item)" style="color: #409EFF;">进度查询</view>
		</view>
	</view>
	<divider></divider>
	<view>
		<view class="borderStyle">
			<text class="fontStyle">维修申请记录:</text>
		</view>
		<view class="divider"></view>
		<view>
			<!-- 表头 -->
			<view class="table-header" style="font-size: 25rpx;">
				<view class="header-item" v-for="(header, index) in tableHeaders" :key="index">
					{{ header }}
				</view>
			</view>

			<!-- 表格数据 -->
			<view v-for="(item, rowIndex) in repairTableData" :key="rowIndex" class="row"
				:class="{ 'even-row': rowIndex % 2 === 0, 'odd-row': rowIndex % 2 !== 0 }">
				<view class="cell">{{ item.userID }}</view>
				<view class="cell">{{ item.userName }}</view>
				<view class="cell">{{ item.autoNum }}</view>
				<view class="cell">{{ item.submitTime }}</view>
				<view class="cell" @click="showRepairDetails(item)" style="color: #409EFF;">进度查询</view>
			</view>
		</view>
	</view>

</template>

<script>
	import Divider from "../../components/divider/divider.vue"
	export default {
		data() {
			return {
				// searchVal: '',
				tableHeaders: ['工号', '姓名', '申请车型', '提交时间', '进度查询'],
				autoTableData: [{
						userID: '001',
						userName: '唐旭',
						autoType: '5座',
						submitTime: '2024-01-11'
					},
					{
						userID: '002',
						userName: '李世贤',
						autoType: '7座',
						submitTime: '2024-01-11'
					}, {
						userID: '002',
						userName: '李世贤',
						autoType: '7座',
						submitTime: '2024-01-11'
					}, {
						userID: '002',
						userName: '李世贤',
						autoType: '7座',
						submitTime: '2024-01-11'
					}, {
						userID: '002',
						userName: '李世贤',
						autoType: '7座',
						submitTime: '2024-01-11'
					},
				],
				// searchVal: '',
				tableHeaders: ['工号', '姓名', '车牌号', '提交时间', '进度查询'],
				repairTableData: [{
						userID: '001',
						userName: '唐旭',
						autoNum: '皖A·A1256',
						submitTime: '2024-01-11'
					},
					{
						userID: '002',
						userName: '李世贤',
						autoNum: '皖A·A1256',
						submitTime: '2024-01-11'
					}, {
						userID: '002',
						userName: '李世贤',
						autoNum: '皖A·A1256',
						submitTime: '2024-01-11'
					}, {
						userID: '002',
						userName: '李世贤',
						autoNum: '皖A·A1256',
						submitTime: '2024-01-11'
					}, {
						userID: '002',
						userName: '李世贤',
						autoNum: '皖A·A1256',
						submitTime: '2024-01-11'
					},
				],
			};
		},
		comments: {
			Divider
		},
		methods: {
			showAutoDetails(item) {
				// 处理详情按钮点击事件，显示详情
				console.log('进度查询', item);
				uni.navigateTo({
					url: "/pages/autoApplicationStepInquiry/autoApplicationStepInquiry"
				})
			},
			// 获取数据
			getData(pageCurrent, value = '') {
				this.loading = true
				this.pageCurrent = pageCurrent
				this.request({
					pageSize: this.pageSize,
					pageCurrent: pageCurrent,
					value: value,
					success: res => {
						// console.log('data', res);
						this.tableData = res.data
						this.total = res.total
						this.loading = false
					}
				})
			},
			// 伪request请求
			request(options) {
				const {
					pageSize,
					pageCurrent,
					success,
					value
				} = options
				let total = tableData.length
				let data = tableData.filter((item, index) => {
					const idx = index - (pageCurrent - 1) * pageSize
					return idx < pageSize && idx >= 0
				})
				if (value) {
					data = []
					tableData.forEach(item => {
						if (item.name.indexOf(value) !== -1) {
							data.push(item)
						}
					})
					total = data.length
				}

				setTimeout(() => {
					typeof success === 'function' &&
						success({
							data: data,
							total: total
						})
				}, 500)
			},
			showRepairDetails(item) {
				// 处理详情按钮点击事件，显示详情
				console.log('进度查询', item);
				uni.navigateTo({
					url: "/pages/repairApplicationSteoInquiry/repairApplicationSteoInquiry"
				})
			},
			// 获取数据
			getData(pageCurrent, value = '') {
				this.loading = true
				this.pageCurrent = pageCurrent
				this.request({
					pageSize: this.pageSize,
					pageCurrent: pageCurrent,
					value: value,
					success: res => {
						// console.log('data', res);
						this.tableData = res.data
						this.total = res.total
						this.loading = false
					}
				})
			},
			// 伪request请求
			request(options) {
				const {
					pageSize,
					pageCurrent,
					success,
					value
				} = options
				let total = tableData.length
				let data = tableData.filter((item, index) => {
					const idx = index - (pageCurrent - 1) * pageSize
					return idx < pageSize && idx >= 0
				})
				if (value) {
					data = []
					tableData.forEach(item => {
						if (item.name.indexOf(value) !== -1) {
							data.push(item)
						}
					})
					total = data.length
				}

				setTimeout(() => {
					typeof success === 'function' &&
						success({
							data: data,
							total: total
						})
				}, 500)
			}
		}
	}
</script>

<style>
	.table-header {
		display: flex;
		position: sticky;
		top: 0;
		z-index: 1;
		background-color: #f1f1f1;
	}

	.header-item {
		flex: 1;
		/* border: 1px solid #ebeef5; */
		padding: 10px;
		text-align: center;
	}

	.row {
		display: flex;
		background-color: #ffffff;
		/* 设置默认背景色 */
	}

	.cell {
		flex: 1;
		border: 1rpx solid ##ebeef5;
		padding: 10px;
		text-align: center;
	}

	.even-row {
		background-color: #ffffff;
		/* 设置偶数行的背景色 */
	}

	.odd-row {
		background-color: #f6f8fa;
		/* 设置奇数行的背景色 */
	}

	.divider {
		margin: 20rpx;
		background: #dcdfe6;
		width: 95%;
		height: 1rpx;
	}

	.borderStyle {
		margin-top: 30rpx;
		margin-left: 30rpx;
		/* margin-bottom: 10rpx; */
	}

	.fontStyle {
		font-size: 40rpx;
		font-weight: bold;
	}
</style>